<template>
  <div class="layoutContainer">
    <div class="layoutHeader">
      <minHeader :menusStructure="menusStructure" />
    </div>
    <div class="layoutWrapper">
      <StarBackground />
      <div class="layoutContent">
        
        <div class="left" style="width: 280px;padding:0;" v-if="route.name.includes('learn') || route.name.includes('process')">
          <div class="minAiBg">
            <img src="@/assets/聊天bg.png" />
          </div>
          <learnContent v-if="route.name.includes('learn')"/>
          <processContent  v-else-if="route.name.includes('process')"/>
        </div>
        <div class="left" v-else>
          <div class="minAiBg">
            <img src="@/assets/聊天bg.png" />
          </div>
          <div class="info">
            <div class="avatar">
              <img :src="state?.userInfo?.avatarUrl || avatar" alt="" />
            </div>
            <div style="margin-top: 20px; font-size: 20px">
              {{ state.userInfo.name }}
            </div>
          </div>
          <minMenu style="width: 250px;" :structure="items" :messages="messages" />
        </div>
        <div class="content">
          <router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.fullPath"  v-if="route.meta.keepAlive"/>
            </keep-alive>
            <component :is="Component" v-if="!route.meta.keepAlive"/>
          </router-view>
				</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import StarBackground from '@/components/StarBackground.vue'
import minHeader from '@/components/common/minHeader.vue'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, watch, h } from 'vue'
import * as antIcons from '@ant-design/icons-vue'
import teacher from '@/router/teacher'
import minMenu from '@/components/common/minMenu.vue'
import { state } from '@/stores/info.js'
import processContent from '@/views/teacher/process/content.vue'
import learnContent from '@/views/teacher/learn/content.vue'
import avatar from '@/assets/user.png';
const route = useRoute()
const router = useRouter()
console.log(state.userInfo)
const items = reactive(
  teacher[0].children.map((val) => {
    return {
      path: val.path,
      label: val.meta.title,
    }
  })
)

const menusStructure = state.menusStructure
const messages = ref({})

const handleMenuClick = (item) => {
  router.push({ path: item.path })
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}
.layoutContainer {
	height: 100%;
	width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-shrink: 0;
  .layoutHeader {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    .header {
      width: $viewMinWidth;
    }
  }
  .layoutWrapper {
		min-height: 0;
		min-width: 0;
		flex: 1;
    position: relative;
    display: flex;
		flex-direction: column;
		align-items: center;
    position: relative;
    .layoutContent {
			flex: 1;
      width: $viewMinWidth;
      display: flex;
			justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        /* margin: 20px 0; */
        padding: 40px 12px;
        position: relative;
        background: #fff;
        .info {
          display: flex;
          align-items: center;
          flex-direction: column;
					margin-bottom: 20px;
          position: relative;
          z-index: 2;
          .avatar {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
        ::v-deep .AIConsulting_agent_container {
          width: 100% !important;
        }
      }
			.content {
				/* background: #fff; */
				border-radius: 8px;
				flex: 1;
				margin: 24px 0 30px 20px;
			}
    }
  }
}
.minAiBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: auto;
  right: 0;
  img {
    width: 100%;
    max-height: 100%;
  }
}
</style>
